<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .cont{position: relative;}
      .cont p{position: absolute;left:0;top:0;}
      .p1{width: 100px;height: 40px;background: red;}
      .p2{width: 100px;height: 40px;background: green;}
      .abc-enter-active, .abc-leave-active {
        transition:all 1s;
      }
      .abc-enter, .abc-leave-to{
        opacity: 0;
        transform: translate(200px);
      }
    </style>
    <script src="../vue.js"></script>
	</head>
	<body>
    <div class="app">
      <button @click="show=!show">按钮</button>
      <div class="cont">
        <transition name="abc">
          <p class="p1" v-show="show">显示</p>
        </transition>
        <transition name="abc">
        <p class="p2" v-show="!show">隐藏</p>
        </transition>
      </div>
    </div>
	</body>
  <script type="text/javascript">
    const vm = new Vue({
      el:".app",
      data:{
        show:true
      }
    })
    
  </script>
</html>
